<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="echarts.min.js" charset="utf-8"></script>
</head>

<body>
    <div id="main" style="width: 100%;height:600px;"></div>
    <!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" charset="utf-8"></script> -->
    <script type="text/javascript">
        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var data4 = [];
        var data5 = [];
        var data6 = [];
        var data7 = [];
        var data8 = [];

        for (var i = 0; i < 10; i++) {
            xAxisData.push('2017-07-0' + i);
            data1.push((Math.random() * 2).toFixed(2));
            data2.push(Math.random().toFixed(2));
            data3.push((Math.random() * 5).toFixed(2));
            data4.push((Math.random() + 0.3).toFixed(2));
            data5.push((Math.random() + 0.3).toFixed(2));
            data6.push((Math.random() + 0.3).toFixed(2));
            data7.push((Math.random() + 0.3).toFixed(2));
            data8.push((Math.random() + 0.3).toFixed(2));
        }

        var option = {
            title:{
              text:'代理新增统计',
              right:0
            },
            backgroundColor: '#eee',
            legend: {
                data: ['新开--全国总代', '升级--全国总代', '新开--一级代理', '升级--一级代理','新开--二级代理','升级--二级代理','新开--三级代理','升级--三级代理',],
                align: 'left',
                left: 10
            },
            // brush: {
            //     toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            //     xAxisIndex: 0
            // },
            // toolbox: {
            //     feature: {
            //         magicType: {
            //             type: ['stack', 'tiled']
            //         },
            //         dataView: {}
            //     }
            // },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                data: xAxisData,
                name: '时间',
                silent: false,
                axisLine: {
                    onZero: true
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                name: '代理人数',
                inverse: false,
                splitArea: {
                    show: false
                }
            },
            // grid: {
            //     left: 100
            // },
            // visualMap: {
            //     type: 'continuous',
            //     dimension: 1,
            //     text: ['High', 'Low'],
            //     inverse: true,
            //     itemHeight: 200,
            //     calculable: true,
            //     min: 0,
            //     max: 6,
            //     top: 60,
            //     left: 10,
            //     inRange: {
            //         colorLightness: [0.4, 0.8]
            //     },
            //     outOfRange: {
            //         color: '#bbb'
            //     },
            //     controller: {
            //         inRange: {
            //             color: '#2f4554'
            //         }
            //     }
            // },
            series: [{
                name: '新开--全国总代',
                type: 'bar',
                stack: 'one',
                itemStyle: diffItemStyle('#ea775a'),
                data: data1
            }, {
                name: '升级--全国总代',
                type: 'bar',
                stack: 'one',
                itemStyle: diffItemStyle('#c0392b'),
                data: data2
            }, {
                name: '新开--一级代理',
                type: 'bar',
                stack: 'two',
                itemStyle: diffItemStyle('#4b9add'),
                data: data3
            }, {
                name: '升级--一级代理',
                type: 'bar',
                stack: 'two',
                itemStyle: diffItemStyle('#2980b9'),
                data: data4
            }, {
                name: '新开--二级代理',
                type: 'bar',
                stack: 'three',
                itemStyle: diffItemStyle('#ffa95c'),
                data: data5
            }, {
                name: '升级--二级代理',
                type: 'bar',
                stack: 'three',
                itemStyle: diffItemStyle('#f39c12'),
                data: data6
            }, {
                name: '新开--三级代理',
                type: 'bar',
                stack: 'four',
                itemStyle: diffItemStyle('#4ec87f'),
                data: data7
            }, {
                name: '升级--三级代理',
                type: 'bar',
                stack: 'four',
                itemStyle: diffItemStyle('#27ae60'),
                data: data8
            }]
        };
        var myChart = echarts.init(document.getElementById('main'));

        myChart.on('brushSelected', renderBrushed);

        function renderBrushed(params) {
            var brushed = [];
            var brushComponent = params.batch[0];

            for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                var rawIndices = brushComponent.selected[sIdx].dataIndex;
                brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
            }

            myChart.setOption({
                title: {
                    backgroundColor: '#333',
                    text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                    bottom: 0,
                    right: 0,
                    width: 100,
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                }
            });
        }
        function diffItemStyle(color) {
            var itemStyle = {
                normal: {color:color},
                emphasis: {
                    barBorderWidth: 1,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowColor: 'rgba(0,0,0,0.5)'
                }
            };
            return itemStyle;
        }
        myChart.setOption(option);
    </script>
</body>

</html>
